<template>
    <header>
        <div class="head_center">
            <component :is="this.$store.state.msg"></component>
            <div class="logo">
                <h1><img src="../../assets/images/header/haier2019_logo.webp" alt=""></h1>
            </div>
            <div class="right_span">
                <ul>
                    <li><router-link to="/"><span><img src="../../assets/images/header/铃铛.png" alt=""></span></router-link></li>
                    <li><router-link to="/shoppingCar"><span><img src="../../assets/images/header/购物车.png" alt=""></span></router-link></li>
                    <li><router-link to="/"><span><img src="../../assets/images/header/search.png" alt=""></span></router-link></li>
                </ul>
            </div>
        </div>
    </header>
</template>



<style scoped>
  header{
    position: relative;
  }
   .head_center{
      display: flex;
      padding: 2px 10px;
      line-height: 50px;
   }
   .head_center img{
       width:22px;
   }
   .head_center>a{
       width:30%;
   }
   .logo{
       width:60%;
       text-align:center;
   }
   .logo img{
      width:85px;
   }
   .right_span{
       width:30%;
   }
   .right_span li{
      float:right;
      padding:0 2px;
   }


</style>
<script>
import jumpp from './jump.vue';
import pluss from './plus.vue';
export default{
    data(){
      return{

      }
    },
    components:{
      jump:jumpp,
      plus:pluss,
    }
  }
</script>
